<template>
  <v-form v-model="valid" class="px-5" ref="myBrandForm">
    <v-text-field v-model="brand.name" label="请输入品牌名称" required :rules="nameRules"/>
    <v-text-field v-model="brand.letter" label="请输入品牌首字母" required :rules="letterRules" />
    <v-cascader
      url="/item/category/list"
      multiple
      required
      v-model="brand.categories"
      label="请选择商品分类"/>
    <v-layout row>
      <v-flex xs3>
        <span style="font-size: 16px; color: #444">品牌LOGO：</span>
      </v-flex>
      <v-flex>
        <v-upload
          v-model="brand.image"
          url="/upload/image"
          :multiple="false"
          :pic-width="250"
          :pic-height="90"
        />
      </v-flex>
    </v-layout>
    <v-layout class="my-2" row>
      <v-spacer/>
      <v-btn @click="submit" color="primary">提交</v-btn>
      <v-btn @click="clear" >重置</v-btn>
    </v-layout>
  </v-form>
</template>

<script>

  export default {
    name: "my-brand-form",
    data() {
      return {
        valid:false, // 表单校验结果标记
        brand:{
          name:'', // 品牌名称
          letter:'', // 品牌首字母
          image:'',// 品牌logo
          categories:[], // 品牌所属的商品分类数组
        },
        nameRules:[
          v => !!v || "品牌名称不能为空",
          v => v.length > 1 || "品牌名称至少2位"
        ],
        letterRules:[
          v => !!v || "首字母不能为空",
          v => /^[A-Z]{1}$/.test(v) || "品牌字母只能是A~Z的大写字母"
        ]
      }
    },
    methods:{
      submit(){
        // 提交表单
        //1表单校验
        if (this.$refs.myBrandForm.validate()){
          //2.定义一个请求参数,通过结构表达式来获取brand中的属性
          const  {categories ,letter ,...params} = this.brand;
          //3处理,只保留categories中的id
          params.cids = categories.map(c => c.id).join(",");
          //4字母大写
          params.letter = letter.toUpperCase();
          //5数据提交到后台
          this.$http.post('/item/brand',this.$qs.stringify(params))
            .then(()=>{
              //关闭窗口,子组件通过$emit调用父组件的函数
              this.$emit("close")
              this.$message.success("保存成功!");
            })
            .catch(()=>{
              this.$message.error("保存失败!");
            })
        }
      },
      clear(){
        // 重置表单
        this.$refs.myBrandForm.reset();
        // 需要手动清空商品分类
        this.categories = [];
      }
    }
  }
</script>

<style scoped>

</style>
